<template>
  <el-dialog v-model="show" title="加入我们" width="1124px" :before-close="closeDialog">
    <div class="hire-content">
      <div v-for="(item, index) in dataList" :key="index" class="hire-item">
        <div class="hire-title">
          <img :src="publicSrc(item.icon)" />
          {{ item.name }}
        </div>
        <el-collapse accordion>
          <el-collapse-item
            v-for="(i, k) in item.children"
            :key="index + '_' + k"
            :name="index + '_' + k"
          >
            <template #title>
              <div class="collapse-title">{{ i.name }}</div>
            </template>
            <div v-html="i.desc" />
          </el-collapse-item>
        </el-collapse>
      </div>
      <div v-if="dataList.length == 0" class="hire-empty f f-col f-jb f-ac">
        <img :src="empty.icon" />
        <div class="hire-empty-text">{{ empty.title }}</div>
        <div class="hire-empty-text_en">{{ empty.title_en }}</div>
        <div class="hire-empty-btn" @click="handleContact">联系我们</div>
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { publicSrc } from "@/utils/common";
import { joinList } from "@/api/about";
import hireNone from "@/assets/about/hire-none.png";
const router = useRouter();
const store = useStore();

const props = defineProps({
  // 显示弹窗
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:modelValue", "close"]);
const dataList = ref<any>([]);
const empty = ref<any>({
  icon: hireNone,
  title: "暂无招聘信息",
  title_en: "No Recruitment Information",
});
const show = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    store.commit("SET_HIRE", false);
    emit("update:modelValue", val);
  },
});
watch(props, (val) => {
  if (val.modelValue) {
    getList();
  }
});

// 获取招聘信息列表
const getList = () => {
  joinList({ status: 0 }).then((res: any) => {
    if (res.code == 200) {
      dataList.value = res.data;
    }
  });
};

// 联系我们
const handleContact = () => {
  closeDialog();
  router.push({
    path: "/pc/contact",
    query: {
      title: encodeURIComponent("招聘信息"),
    },
  });
};

// 关闭弹窗
const closeDialog = () => {
  show.value = false;
  emit("close", false);
};
</script>
<style lang="scss" scoped>
.hire-content {
  height: 750px;
  padding: 0 20px;
  overflow-y: auto;
  .hire-title {
    display: flex;
    align-items: center;
    margin: 20px 0;
    font-weight: bold;
    img {
      width: 42px;
      height: 42px;
      margin-right: 10px;
    }
  }
  .collapse-title {
    padding-left: 20px;
    color: #000;
    font-size: 18px;
  }
  .hire-empty {
    margin-top: 100px;
    height: 450px;
    img {
      width: 280px;
      height: 229px;
      object-fit: cover;
    }
    &-text {
      font-size: 28px;
      color: #000;
    }
    &-text_en {
      font-size: 18px;
      color: #9e9e9e;
    }
    &-btn {
      width: 168px;
      height: 55px;
      border-radius: 40px;
      background: #307ef4;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #fff;
      &:hover {
        cursor: pointer;
        background: #3b8df5;
      }
    }
  }
}
:deep(.el-collapse) {
  border: none !important;
}
:deep(.el-collapse-item__header) {
  background-color: #f5f5f5;
  margin-bottom: 10px;
  border-bottom: none !important;
}
</style>
